<template>
  <div class="header">
    <div class="header-box">
      <div class="logo">
        <nuxt-link class="logo-img" to="/">
          <img src="../../assets/image/logo.png" />
        </nuxt-link>
      </div>
      <div class="nav">
        <ul>
          <li v-for="v in navList" :key="v.id">
            <nuxt-link v-if="v.path" :class="{ active: v.active }" :to="v.path">
              {{ v.text }}
            </nuxt-link>
            <a v-else :class="{ active: v.active }" :href="v.href" target="_blank">
              {{ v.text }}
            </a>
          </li>
        </ul>
      </div>
      <div class="search">
        <input
          type="text"
          name="keywords"
          autocomplete="off"
          v-model="searchText"
          @keyup.enter="toSearch"
          placeholder="搜职位、搜公司..."
        />
        <i class="iconfont icon-search" @click="toSearch"></i>
        <i
          class="iconfont icon-laba"
          :class="[hasMag && 'active']"
          @click.stop="toggleMsg"
        ></i>
        <div class="msg" v-if="showMsg">
          <p class="menu-title">消息中心</p>
          <ul>
            <li
              v-for="(u, n) in msgMenu"
              :key="'msgMenu_' + n"
              :class="[!u.is_open && 'active']"
              @click="jumpTo(u)"
            >
              <p class="text">{{ u.message }}</p>
              <!-- <p class="time">{{ u.time }}</p> -->
            </li>
          </ul>
        </div>
      </div>
      <div class="user" v-show="authUser.usertype" @click.stop="toggleMenu">
        <span class="avator">
          <img :src="authUser.photo || require('../../static/man.png')" />
        </span>
        <span class="my">我的</span>
        <div class="menu" v-if="showMenu">
          <ul v-if="authUser.usertype === 1">
            <li v-for="u in userMenu" :key="u.id">
              <nuxt-link :to="u.path">{{ u.text }}</nuxt-link>
            </li>
          </ul>
          <ul v-else-if="authUser.usertype === 2">
            <li v-for="u in companyMenu" :key="u.id">
              <nuxt-link :to="u.path">{{ u.text }}</nuxt-link>
            </li>
          </ul>
          <p class="logout" @click="logout">退出登录</p>
        </div>
      </div>
      <div class="cornor" v-show="!authUser.usertype">
        <p class="login-btn" @click="showDialog({ login: true })">登录</p>
        <p class="pie">|</p>
        <p class="register-btn" @click="showDialog({ register: true })">注册</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getMessage } from '@/api/users';
export default {
  data () {
    return {
      authUser: null,
      userType: 1,
      indexActive: false,
      navList: [
        { id: 'nav-1', path: '/', text: '首页', active: false },
        { id: 'nav-2', path: '/job', text: '找工作', active: false },
        { id: 'nav-5', path: '/company/list', text: '找公司', active: false },
        { id: 'nav-3', path: '/choice', text: '双选会', active: false },
        { id: 'nav-6', href: 'http://chat.weilaixiaozhao.com/chat/', text: '交流平台', active: false },
        { id: 'nav-7', path: '/news', text: '资讯', active: false },

      ],
      showMenu: false,
      userMenu: [
        { id: 'userMenu1', path: '/user', text: '个人中心' },
        { id: 'userMenu2', path: '/process', text: '投递进度' },
        { id: 'userMenu3', path: '/collection', text: '收藏职位' },
        { id: 'userMenu4', path: '/setting', text: '账号设置' },
      ],
      companyMenu: [
        { id: 'comMenu1', path: '/company', text: '企业信息' },
        { id: 'comMenu2', path: '/position', text: '职位管理' },
        { id: 'comMenu3', path: '/choice/list', text: '加入双选会' },
        { id: 'comMenu4', path: '/order', text: '订单中心' },
        { id: 'comMenu5', path: '/setting', text: '账号设置' },
      ],
      showMsg: false,
      msgMenu: [],
      searchText: '',
      hasMag: false,
    }
  },
  created () {
    this.authUser = this.$store.state.user.authUser;
    this.userType = this.authUser.usertype || 0;
  },
  mounted () {
    // 键盘监听事件 - ESC - 关闭菜单
    this.$nextTick(() => {
      document.addEventListener('keyup', (e) => {
        if (e.keyCode === 27) {
          this.showMenu && this.$store.dispatch('user/toggleMenu');
          this.showMsg && this.$store.dispatch('user/toggleMsg');
        }
      });
      this.authUser && JSON.stringify(this.authUser) !== '{}' && this.toGetMessage()
    });
  },
  watch: {
    $route: {
      handler (val, oldVal) {
        this.toGetMessage();
      },
      // deep: true
    },
    '$store.state.user.authUser' (val) {
      this.authUser = val;
    },
    '$store.state.user.showMenu' (val) {
      this.showMenu = val;
      if (val) {
        document.body.removeEventListener('click', this.toCloseMenu)
        document.body.addEventListener('click', this.toCloseMenu)
      } else {
        document.body.removeEventListener('click', this.toCloseMenu)
      }
    },
    '$store.state.user.showMsg' (val) {
      this.showMsg = val;
      if (val) {
        document.body.removeEventListener('click', this.toCloseMenu)
        document.body.addEventListener('click', this.toCloseMenu)
      } else {
        document.body.removeEventListener('click', this.toCloseMenu)
      }
    }
  },
  computed: {
  },
  methods: {
    toSearch () {
      if (this.searchText) {
        this.$router.push({
          path: '/job',
          query: { word: this.searchText }
        })
      }
    },
    jumpTo (obj) {
      this.msgMenu.forEach(s => {
        if (!s.is_open && s !== obj) {
          this.hasMag = true;
        } else {
          this.hasMag = false;
        }
      })
      const link = obj.link;
      link && this.$router.push({
        path: link
      })
    },
    toGetMessage () {
      return getMessage().then(res => {
        if (res.code === 200) {
          if (res.data && res.data.length === 0) {
            this.hasMag = false;
            // this.$message.info('没有更多消息！')
          }
          res.data.forEach(s => {
            !s.is_open && (this.hasMag = true);
          })
          return res.data;
        } else if (res.code === 1008) {
          // 未登录 - 不展示
          this.hasMag = false;
        } else {
          this.$message.warning(res.msg)
          return [];
        }
      }).catch(err => {
        this.$message.error(err || '网络错误！')
      })
    },
    async toggleMsg () { // 打开/关闭 消息中心
      if (!this.authUser || JSON.stringify(this.authUser) === '{}') {
        this.showDialog({ login: true });
        return
      }
      !this.showMsg && (this.msgMenu = await this.toGetMessage());
      this.$store.dispatch('user/toggleMsg', !this.showMsg)
    },
    toggleMenu () { // 打开/关闭 菜单
      this.$store.dispatch('user/toggleMenu', !this.showMenu)
    },
    toCloseMenu () { // 关闭 菜单
      this.showMenu && this.$store.dispatch('user/toggleMenu');
      this.showMsg && this.$store.dispatch('user/toggleMsg');
    },
    logout () { // 退出登录
      this.$store.dispatch('user/toggleModal', {
        logout: true
      })
    },
    showDialog (obj) { // 打开登录框
      this.$store.dispatch('user/toggleModal', obj);
    },
  },
}
</script>

<style lang="scss" scoped>
.header {
  height: 50px;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #ddd;
  .header-box {
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: $base-width;

    .logo {
      flex: 0 0 125px;
      a {
        display: block;
        height: 100%;
      }
      img {
        height: 30px;
      }
    }
    .nav {
      margin: 0 0 0 80px;
      flex: 1;
      ul {
        display: flex;

        li {
          width: 70px;
          margin: 0 10px;
          a {
            text-align: center;
            display: block;
            height: 50px;
            line-height: 47px;
            &.nuxt-link-exact-active,
            &:hover {
              color: $base-color;
              border-bottom: 3px solid $base-color;
            }
          }
          &:not(:first-child) a.nuxt-link-active {
            color: $base-color;
            border-bottom: 3px solid $base-color;
          }
        }
      }
    }
    .search {
      display: flex;
      height: 100%;
      align-items: center;
      flex: 0 0 235px;
      position: relative;
      input {
        outline: none;
        height: 24px;
        width: 170px;
        padding: 0 10px;
        border-radius: 12px;
        border: 1px solid #ccc;
      }
      i {
        font-size: 22px;
        margin-left: 15px;
        cursor: pointer;
        position: relative;
        &.active::after {
          content: '';
          position: absolute;
          top: 0;
          right: -3px;
          height: 8px;
          width: 8px;
          background: $base-color-danger;
          border-radius: 50%;
        }
      }
      .msg {
        position: absolute;
        top: 36px;
        z-index: 10;
        right: -105px;
        width: 230px;
        padding: 0 20px 10px 20px;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #ebebeb;
        box-shadow: 0 5px 15px 0 #e8e8e9;
        .menu-title {
          height: 40px;
          line-height: 40px;
          color: #555;
          font-size: 14px;
          text-align: center;
        }
        ul {
          li {
            line-height: 50px;
            border-top: 1px solid #ebebeb;
            text-align: left;
            position: relative;
            cursor: pointer;
            .text {
              font-size: 14px;
              color: #24292f;
            }
            .time {
              font-size: 12px;
              color: #ccc;
            }
            &:hover {
              .text {
                color: $base-color;
              }
            }
            &::after {
              content: '';
              position: absolute;
              top: 50%;
              right: -2px;
              height: 5px;
              width: 5px;
              margin-top: -2.5px;
              background: #ccc;
              border-radius: 50%;
            }
            &.active {
              &::after {
                background: $base-color-danger;
              }
            }
          }
        }
      }
    }
    .cornor {
      display: flex;
      height: 100%;
      align-items: center;
      margin-left: 70px;
      p {
        font-size: 14px;
        color: #555;
        padding: 0 5px;
        &:not(.pie):hover {
          cursor: pointer;
          color: $base-color;
        }
      }
      .pie {
        margin: 0 2px;
        padding: 0;
      }
    }
    .user {
      margin-left: 80px;
      padding-right: 10px;
      cursor: pointer;
      position: relative;
      span {
        display: inline-block;
        vertical-align: middle;
      }
      line-height: 24px;
      .avator {
        height: 24px;
        line-height: 22px;
        width: 24px;
        border: 1px solid #ccc;
        border-radius: 50%;
        text-align: center;
        font-size: 0;
        overflow: hidden;
        img {
          width: 100%;
          vertical-align: middle;
        }
      }
      .my {
        font-size: 14px;
        color: #666;
        margin-left: 5px;
      }
      .menu {
        position: absolute;
        top: 38px;
        right: 5px;
        width: 70px;
        z-index: 10;
        text-align: center;
        background: #fff;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        box-shadow: 0 5px 15px 0 #e8e8e9;
        ul {
          li {
            height: 25px;
            line-height: 25px;
            a {
              font-size: 12px;
              color: #555;
              height: 100%;
              display: block;
              &:hover {
                color: $base-color;
              }
            }
          }
        }
        .logout {
          height: 30px;
          line-height: 30px;
          text-align: center;
          color: #999;
          font-size: 12px;
          border-top: 1px solid #ccc;
        }
      }
    }
  }
}
</style>
